[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import CountdownTimer from "@/components/countdown-timer" export default function Home() { return } [V0_FILE]typescriptreact:file="components/world-clock.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" interface WorldClockProps { textColor: string secondaryTextColor: string } export default function WorldClock({ textColor, secondaryTextColor }: WorldClockProps) { const [time, setTime] = useState(new Date()) const animationFrameRef = useRef(null) // Update the clock every second using requestAnimationFrame for smooth updates useEffect(() => { const updateClock = () => { setTime(new Date()) animationFrameRef.current = requestAnimationFrame(updateClock) } animationFrameRef.current = requestAnimationFrame(updateClock) return () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } } }, []) // Format time for a specific timezone const formatTimeForZone = (timeZone: string) => { try { return time.toLocaleTimeString("en-US", { timeZone, hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, }) } catch (error) { console.error(`Error formatting time for ${timeZone}:`, error) return "--:--:--" } } // Get times for different locations const sydneyTime = formatTimeForZone("Australia/Sydney") const newYorkTime = formatTimeForZone("America/New_York") const ukTime = formatTimeForZone("Europe/London") const indiaTime = formatTimeForZone("Asia/Kolkata") return (

SYDNEY {sydneyTime}

NEW YORK {newYorkTime}

LONDON {ukTime}

INDIA {indiaTime}

) } [V0_FILE]typescriptreact:file="components/countdown-timer.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Play, Pause, RotateCcw, Clock, Palette, Moon, Sun, Droplets, Flame, Leaf, Snowflake, Sparkles, Heart, Cloud, Sunset, Rainbow, Waves, Volume2, VolumeX, Save, Bookmark, Settings, Maximize, Minimize, Timer, Bell, Repeat, Trash2, } from "lucide-react" import WorldClock from "@/components/world-clock" // Define theme types and colors type ThemeName = | "dark" | "light" | "blue" | "red" | "green" | "purple" | "teal" | "amber" | "pink" | "indigo" | "sunset" | "ocean" interface Theme { name: ThemeName icon: React.ReactNode background: string text: string textSecondary: string buttonHover: string dialogBg: string dialogBorder: string } interface TimerPreset { id: string name: string days: number hours: number minutes: number seconds: number isInterval: boolean intervals?: { work: number // seconds rest: number // seconds cycles: number } } interface IntervalConfig { work: number // seconds rest: number // seconds cycles: number currentCycle: number isWorkPhase: boolean } interface CountdownTimerProps { initialTime: number } export default function CountdownTimer({ initialTime }: CountdownTimerProps) { // Timer state const [time, setTime] = useState(initialTime * 1000) // Convert to milliseconds const [isRunning, setIsRunning] = useState(false) const [showCustomTimer, setShowCustomTimer] = useState(false) const [showThemeSelector, setShowThemeSelector] = useState(false) const [showSettings, setShowSettings] = useState(false) const [showPresets, setShowPresets] = useState(false) const [customDays, setCustomDays] = useState("0") const [customHours, setCustomHours] = useState("1") const [customMinutes, setCustomMinutes] = useState("0") const [customSeconds, setCustomSeconds] = useState("0") const [currentTheme, setCurrentTheme] = useState("dark") const [isFullscreen, setIsFullscreen] = useState(false) const [presetName, setPresetName] = useState("") const [presets, setPresets] = useState(() => { if (typeof window !== "undefined") { const savedPresets = localStorage.getItem("timerPresets") return savedPresets ? JSON.parse(savedPresets) : [] } return [] }) // Interval timer state const [isIntervalMode, setIsIntervalMode] = useState(false) const [intervalConfig, setIntervalConfig] = useState({ work: 25 * 60, // 25 minutes in seconds rest: 5 * 60, // 5 minutes in seconds cycles: 4, currentCycle: 1, isWorkPhase: true, }) // Sound notification state const [soundEnabled, setSoundEnabled] = useState(true) const [volume, setVolume] = useState(80) const [selectedSound, setSelectedSound] = useState("bell") const audioRef = useRef(null) // Visual enhancement state const [showProgress, setShowProgress] = useState(true) const [progressColor, setProgressColor] = useState("#ffffff") const [animationsEnabled, setAnimationsEnabled] = useState(true) const [showWorldClock, setShowWorldClock] = useState(true) // Refs const intervalRef = useRef(null) const lastUpdateTimeRef = useRef(0) const containerRef = useRef(null) const initialTimeRef = useRef(initialTime) // Define themes const themes: Record = { dark: { name: "dark", icon: , background: "bg-gradient-to-br from-black via-gray-900 to-black", text: "text-white", textSecondary: "text-white/50", buttonHover: "hover:bg-white/10", dialogBg: "bg-black/95", dialogBorder: "border-white/10", }, light: { name: "light", icon: , background: "bg-gradient-to-br from-gray-100 via-white to-gray-100", text: "text-gray-900", textSecondary: "text-gray-500", buttonHover: "hover:bg-gray-200", dialogBg: "bg-white/95", dialogBorder: "border-gray-200", }, blue: { name: "blue", icon: , background: "bg-gradient-to-br from-blue-950 via-blue-900 to-blue-800", text: "text-blue-50", textSecondary: "text-blue-300/70", buttonHover: "hover:bg-blue-800/50", dialogBg: "bg-blue-900/95", dialogBorder: "border-blue-700/30", }, red: { name: "red", icon: , background: "bg-gradient-to-br from-red-950 via-red-900 to-red-800", text: "text-red-50", textSecondary: "text-red-300/70", buttonHover: "hover:bg-red-800/50", dialogBg: "bg-red-900/95", dialogBorder: "border-red-700/30", }, green: { name: "green", icon: , background: "bg-gradient-to-br from-green-950 via-green-900 to-green-800", text: "text-green-50", textSecondary: "text-green-300/70", buttonHover: "hover:bg-green-800/50", dialogBg: "bg-green-900/95", dialogBorder: "border-green-700/30", }, purple: { name: "purple", icon: , background: "bg-gradient-to-br from-purple-950 via-purple-900 to-purple-800", text: "text-purple-50", textSecondary: "text-purple-300/70", buttonHover: "hover:bg-purple-800/50", dialogBg: "bg-purple-900/95", dialogBorder: "border-purple-700/30", }, teal: { name: "teal", icon: , background: "bg-gradient-to-br from-teal-950 via-teal-900 to-teal-800", text: "text-teal-50", textSecondary: "text-teal-300/70", buttonHover: "hover:bg-teal-800/50", dialogBg: "bg-teal-900/95", dialogBorder: "border-teal-700/30", }, amber: { name: "amber", icon: , background: "bg-gradient-to-br from-amber-950 via-amber-900 to-amber-800", text: "text-amber-50", textSecondary: "text-amber-300/70", buttonHover: "hover:bg-amber-800/50", dialogBg: "bg-amber-900/95", dialogBorder: "border-amber-700/30", }, pink: { name: "pink", icon: , background: "bg-gradient-to-br from-pink-950 via-pink-900 to-pink-800", text: "text-pink-50", textSecondary: "text-pink-300/70", buttonHover: "hover:bg-pink-800/50", dialogBg: "bg-pink-900/95", dialogBorder: "border-pink-700/30", }, indigo: { name: "indigo", icon: , background: "bg-gradient-to-br from-indigo-950 via-indigo-900 to-indigo-800", text: "text-indigo-50", textSecondary: "text-indigo-300/70", buttonHover: "hover:bg-indigo-800/50", dialogBg: "bg-indigo-900/95", dialogBorder: "border-indigo-700/30", }, sunset: { name: "sunset", icon: , background: "bg-gradient-to-br from-orange-950 via-red-800 to-purple-900", text: "text-orange-50", textSecondary: "text-orange-200/70", buttonHover: "hover:bg-orange-800/50", dialogBg: "bg-orange-900/95", dialogBorder: "border-orange-700/30", }, ocean: { name: "ocean", icon: , background: "bg-gradient-to-br from-cyan-950 via-blue-900 to-indigo-900", text: "text-cyan-50", textSecondary: "text-cyan-200/70", buttonHover: "hover:bg-cyan-800/50", dialogBg: "bg-cyan-900/95", dialogBorder: "border-cyan-700/30", }, } const theme = themes[currentTheme] // Sound options const soundOptions = [ { id: "bell", name: "Bell", path: "https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3" }, { id: "digital", name: "Digital", path: "https://assets.mixkit.co/active_storage/sfx/2870/2870-preview.mp3" }, { id: "gentle", name: "Gentle", path: "https://assets.mixkit.co/active_storage/sfx/1114/1114-preview.mp3" }, ] // Save presets to localStorage useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("timerPresets", JSON.stringify(presets)) } }, [presets]) // Initialize audio element useEffect(() => { if (typeof window !== "undefined") { const soundPath = soundOptions.find((s) => s.id === selectedSound)?.path || soundOptions[0].path // Create new audio element const audio = new Audio() // Add error handling audio.addEventListener("error", (e) => { console.warn("Audio error:", e) // Don't set audioRef if there's an error }) // Only set the source after adding the error listener audio.src = soundPath audio.volume = volume / 100 audio.load() // Preload the audio // Only set the ref if successfully loaded audio.addEventListener("canplaythrough", () => { audioRef.current = audio }) return () => { if (audioRef.current) { audioRef.current.pause() audioRef.current = null } } } }, [selectedSound, volume]) // Timer logic useEffect(() => { if (isRunning && time > 0) { // Store the start time of this timer session const startTime = Date.now() const initialTimeValue = time let frameId: number // Use high-precision animation frame timing instead of setInterval const updateTimer = () => { // Calculate elapsed time directly from system clock to prevent drift const elapsedTime = Date.now() - startTime const newTime = initialTimeValue - elapsedTime // Only update state if the time has actually changed (by at least 10ms) // This reduces unnecessary renders if (Math.abs(time - newTime) >= 10) { setTime(newTime > 0 ? newTime : 0) } // Continue the animation loop if timer is still running if (newTime > 0) { frameId = requestAnimationFrame(updateTimer) } else { // Timer reached zero setTime(0) setIsRunning(false) // Play sound when timer reaches zero with better error handling if (soundEnabled && audioRef.current) { try { audioRef.current.currentTime = 0 const playPromise = audioRef.current.play() // Handle the play promise if (playPromise !== undefined) { playPromise.catch((error) => { console.warn("Error playing sound:", error) }) } } catch (e) { console.warn("Error playing sound:", e) } } // Show browser notification if (soundEnabled && "Notification" in window && Notification.permission === "granted") { new Notification("Timer Complete", { body: "Your countdown timer has finished!", icon: "/favicon.ico", }) } // Handle interval timer logic if (isIntervalMode) { handleIntervalTimerComplete() } } } // Start the animation frame loop frameId = requestAnimationFrame(updateTimer) // Add visibility change detection to improve performance when tab is not visible const handleVisibilityChange = () => { if (document.visibilityState === "visible") { // Recalibrate the timer when tab becomes visible again const elapsedSinceStart = Date.now() - startTime const recalibratedTime = initialTimeValue - elapsedSinceStart setTime(recalibratedTime > 0 ? recalibratedTime : 0) // Restart animation frames if timer should still be running if (recalibratedTime > 0) { frameId = requestAnimationFrame(updateTimer) } else { setIsRunning(false) } } } document.addEventListener("visibilitychange", handleVisibilityChange) return () => { // Clean up cancelAnimationFrame(frameId) document.removeEventListener("visibilitychange", handleVisibilityChange) } } }, [isRunning, time, soundEnabled, isIntervalMode]) // Handle keyboard shortcuts useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // Only handle shortcuts if not in an input field if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) { return } switch (e.key) { case " ": // Space bar e.preventDefault() if (isRunning) { handlePause() } else { handleStart() } break case "r": if (!e.ctrlKey && !e.metaKey) { e.preventDefault() handleReset() } break case "f": if (!e.ctrlKey && !e.metaKey) { e.preventDefault() toggleFullscreen() } break case "Escape": if (isFullscreen) { e.preventDefault() toggleFullscreen() } break } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [isRunning, isFullscreen]) // Request notification permission useEffect(() => { if ("Notification" in window && Notification.permission === "default") { Notification.requestPermission() } }, []) const formatTime = (milliseconds: number) => { const totalSeconds = Math.floor(milliseconds / 1000) const ms = Math.floor((milliseconds % 1000) / 10) // Get only 2 digits of milliseconds const days = Math.floor(totalSeconds / 86400) const hours = Math.floor((totalSeconds % 86400) / 3600) const minutes = Math.floor((totalSeconds % 3600) / 60) const seconds = totalSeconds % 60 return { days: days.toString().padStart(2, "0"), hours: hours.toString().padStart(2, "0"), minutes: minutes.toString().padStart(2, "0"), seconds: seconds.toString().padStart(2, "0"), milliseconds: ms.toString().padStart(2, "0"), totalSeconds, } } const handleStart = () => { if (time === 0) { // If timer reached zero, reset to initial time if (isIntervalMode) { startNextIntervalPhase() } else { setTime(initialTimeRef.current * 1000) } } // We no longer need lastUpdateTimeRef here as we're using a different timing approach setIsRunning(true) } const handlePause = () => { setIsRunning(false) } const handleReset = () => { setIsRunning(false) if (isIntervalMode) { resetIntervalTimer() } else { setTime(initialTimeRef.current * 1000) } } const handleSetCustomTimer = () => { const days = Number.parseInt(customDays) || 0 const hours = Number.parseInt(customHours) || 0 const minutes = Number.parseInt(customMinutes) || 0 const seconds = Number.parseInt(customSeconds) || 0 const totalSeconds = days * 86400 + hours * 3600 + minutes * 60 + seconds if (totalSeconds > 0) { initialTimeRef.current = totalSeconds setTime(totalSeconds * 1000) setIsRunning(false) } setShowCustomTimer(false) } const handleThemeChange = (themeName: ThemeName) => { setCurrentTheme(themeName) setShowThemeSelector(false) } const toggleFullscreen = () => { if (!isFullscreen) { if (containerRef.current?.requestFullscreen) { containerRef.current.requestFullscreen() setIsFullscreen(true) } } else { if (document.exitFullscreen) { document.exitFullscreen() setIsFullscreen(false) } } } // Handle fullscreen change events useEffect(() => { const handleFullscreenChange = () => { setIsFullscreen(!!document.fullscreenElement) } document.addEventListener("fullscreenchange", handleFullscreenChange) return () => document.removeEventListener("fullscreenchange", handleFullscreenChange) }, []) // Preset functions const savePreset = () => { if (!presetName.trim()) return const newPreset: TimerPreset = { id: Date.now().toString(), name: presetName, days: Number.parseInt(customDays) || 0, hours: Number.parseInt(customHours) || 0, minutes: Number.parseInt(customMinutes) || 0, seconds: Number.parseInt(customSeconds) || 0, isInterval: isIntervalMode, intervals: isIntervalMode ? { work: intervalConfig.work, rest: intervalConfig.rest, cycles: intervalConfig.cycles, } : undefined, } setPresets([...presets, newPreset]) setPresetName("") } const loadPreset = (preset: TimerPreset) => { setCustomDays(preset.days.toString()) setCustomHours(preset.hours.toString()) setCustomMinutes(preset.minutes.toString()) setCustomSeconds(preset.seconds.toString()) const totalSeconds = preset.days * 86400 + preset.hours * 3600 + preset.minutes * 60 + preset.seconds initialTimeRef.current = totalSeconds setTime(totalSeconds * 1000) setIsIntervalMode(preset.isInterval) if (preset.isInterval && preset.intervals) { setIntervalConfig({ ...intervalConfig, work: preset.intervals.work, rest: preset.intervals.rest, cycles: preset.intervals.cycles, currentCycle: 1, isWorkPhase: true, }) } setIsRunning(false) setShowPresets(false) } const deletePreset = (id: string) => { setPresets(presets.filter((p) => p.id !== id)) } // Interval timer functions const handleIntervalTimerComplete = () => { if (intervalConfig.isWorkPhase) { // Work phase complete, start rest phase if (intervalConfig.currentCycle < intervalConfig.cycles) { setTimeout(() => { setIntervalConfig({ ...intervalConfig, isWorkPhase: false, }) setTime(intervalConfig.rest * 1000) setIsRunning(true) }, 1000) } else { // All cycles complete resetIntervalTimer() } } else { // Rest phase complete, start next work phase setTimeout(() => { setIntervalConfig({ ...intervalConfig, currentCycle: intervalConfig.currentCycle + 1, isWorkPhase: true, }) setTime(intervalConfig.work * 1000) setIsRunning(true) }, 1000) } } const startNextIntervalPhase = () => { if (intervalConfig.isWorkPhase) { setTime(intervalConfig.work * 1000) } else { setTime(intervalConfig.rest * 1000) } } const resetIntervalTimer = () => { setIntervalConfig({ ...intervalConfig, currentCycle: 1, isWorkPhase: true, }) setTime(intervalConfig.work * 1000) } const updateIntervalConfig = (field: keyof Omit, value: number) => { setIntervalConfig({ ...intervalConfig, [field]: value, }) if (field === "work" && intervalConfig.isWorkPhase) { setTime(value * 1000) initialTimeRef.current = value } else if (field === "rest" && !intervalConfig.isWorkPhase) { setTime(value * 1000) initialTimeRef.current = value } } // Calculate progress percentage const calculateProgress = () => { if (isIntervalMode) { const totalTime = intervalConfig.isWorkPhase ? intervalConfig.work : intervalConfig.rest const currentTime = time / 1000 return 100 - (currentTime / totalTime) * 100 } else { const totalTime = initialTimeRef.current const currentTime = time / 1000 return 100 - (currentTime / totalTime) * 100 } } const { days, hours, minutes, seconds, milliseconds, totalSeconds } = formatTime(time) const progress = calculateProgress() return (

{/* Progress indicator */} {showProgress && (

)} {/* World Clock */} {showWorldClock && } {/* Interval mode indicator */} {isIntervalMode && (

{intervalConfig.isWorkPhase ? "WORK" : "REST"} • Cycle {intervalConfig.currentCycle}/{intervalConfig.cycles}

)} {/* Timer Display */}

{/* Days */} {Number.parseInt(days) > 0 && ( <>

{days} Days

{/* Separator */} : )} {/* Hours */}

{hours} Hours

{/* Separator */} : {/* Minutes */}

{minutes} Minutes

{/* Separator */} : {/* Seconds */}

{seconds} Seconds

{/* Separator */} . {/* Milliseconds */}

{milliseconds} MS

{/* Controls */}

{!isRunning ? ( ) : ( )} {/* Theme Selector */} {/* Settings Dialog */} {/* Fullscreen Toggle */}

{/* Presets Dialog */} {/* Keyboard shortcuts info - hidden visually but available for screen readers */}

Keyboard Shortcuts

Space: Start or pause timer
R: Reset timer
F: Toggle fullscreen
Escape: Exit fullscreen

) }

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This